<!--
 * @author: Spring
 * @create: 2021-06-25 10:09 AM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-06-29 17:30 PM
 * @desc: 
-->
<template>
  <div class="container">
    <div class="top">
      <input type="text" placeholder="输入文章标题..." v-model="title" />
      <div class="submit">
        <div class="fb" @click="show = !show">发布</div>
        <div class="choose" v-if="show">
          <div class="title">发布文章</div>
          <div class="className">
            添加标签:
            <el-select
              v-model="value"
              filterable
              allow-create
              default-first-option
              placeholder="请选择文章标签"
            >
              <el-option
                v-for="item in options"
                :key="item.tag_id"
                :label="item.tag_name"
                :value="item.tag_name"
              >
              </el-option>
            </el-select>
          </div>
          <div class="cover">
            文章封面：
            <el-upload
              action="http://api_devss.wanxikeji.cn/api/savePic"
              :show-file-list="false"
              name="img"
              accept="image/jpeg,image/gif,image/png"
              :on-success="handleSuccess"
              class="upload"
            >
              <div class="addImg chooseImg" v-if="!img">+</div>
              <div class="img" v-else>
                <img :src="$image(img)" alt="" />
                <div class="el-icon-delete-solid" @click.stop="img = ''"></div>
              </div>
            </el-upload>
          </div>
          <div class="desc">
            编辑摘要：
            <textarea
              name=""
              id=""
              cols="50"
              rows="5"
              v-model="textarea"
            ></textarea>
          </div>
          <div class="sure">
            <div class="cancel" @click="show = false">取消</div>
            <div class="yes" @click="issue">确定并发布</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div id="div1"></div> -->
    <div class="editorpre">
      <wang @geteditor="geteditor"/>
      <div class="preview" v-html="editorContent">111</div>
    </div>
  </div>
</template>

<script>
import { addModifyArticle, tagRanking } from "/utils/api.js";
import wang from "@/components/WangEditor.vue";
export default {
  data() {
    return {
      //富文本
      editorContent:'',
      editor: "",
      //标签
      value: [],
      //标签列表
      options: [],
      //封面图片
      img: "",
      //描述
      textarea: "",
      //显示发布文章
      show: false,
      //富文本内容
      inputContent: "",
      //标题
      title: "",
    };
  },
  components: {
    wang,
  },
  mounted() {
    this.gettag();
    // this.initE()
  },
  methods: {
    // 获取富文本
    geteditor(editor){
      this.editorContent=editor
    },
    //封面
    handleSuccess(response, file, fileList) {
      this.img = response.data;
    },
    //获取标签
    gettag() {
      tagRanking().then((res) => {
        this.options = res.data;
        console.log(this.options);
      });
    },
    //发布文章
    issue() {
      if (!this.value) {
        this.$message("请选择标签", "error");
        return;
      }
      let obj = {
        token: this.$store.state.token,
        info: JSON.stringify({
          content: this.editorContent,
        }),
        tags_name: [this.value],
        pic: this.img,
        type: 1,
        title: this.title,
      };
      console.log(obj);
      addModifyArticle(obj).then((res) => {
        if (res.code == 2000) {
          this.$message("添加成功", "success");
          this.$router.push("/Home");
        }
      });
    },
  },
};
</script>

<style  lang="scss">
  .editorpre{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .preview{
      width: 50%;
      height: 400px;
      max-height: 500px;
      background-color: #fff;
      padding: 20px;
      border: 1px solid #ddd;
      padding-bottom: 20px;
      border-bottom: none;
    }
  }
.top {
  background-color: #fff;
  padding: 0 10px;
  height: 65px;
  z-index: 9999;
  @include flex(space-between);
  input {
    flex: 1;
    height: 100%;
    outline: none;
    border: none;
    @include font(24px, #1d2129);
  }
  .submit {
    width: 62px;
    height: 32px;
    background-color: #1d7dfa;
    @include flex();
    @include font(14px, #fff);
    position: relative;
    .fb {
      width: 62px;
      height: 32px;
      background-color: #1d7dfa;
      @include flex();
      @include font(14px, #fff);
      cursor: pointer;
    }
    .choose {
      border: 1px solid #ddd;
      background-color: #fff;
      color: #333;
      z-index: 100;
      @include position(absolute, 70px, none, none, -540px, 560px, 455px);
      .title {
        width: 100%;
        height: 64px;
        line-height: 64px;
        box-sizing: border-box;
        padding-left: 20px;
        font-size: 18px;
        border-bottom: 1px solid #ddd;
      }
      .className {
        box-sizing: border-box;
        padding-left: 20px;
        height: 100px;
        z-index: 9999;
        @include flex(flex-start);
        .select {
          margin-left: 10px;
          z-index: 9999;
          .option {
            z-index: 9999;
            @include flex();
            cursor: pointer;
          }
        }
      }
      .cover {
        box-sizing: border-box;
        padding-left: 20px;
        @include flex(flex-start);
        z-index: -1;
        .addImg {
          width: 80px;
          height: 80px;
          border: 1px dashed #c5c5c5;
          @include font(50px, #d2d2d2);
          @include flex();
        }
        .img {
          width: 80px;
          height: 80px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          div {
            cursor: pointer;
            @include position(absolute, 5px, 10px, none, none, 10px, 10px);
          }
        }
      }
      .desc {
        box-sizing: border-box;
        padding-left: 20px;
        height: 100px;
        @include flex(flex-start);
      }
      .sure {
        height: 100px;
        @include flex(flex-end);
        box-sizing: border-box;
        padding-right: 20px;
        div {
          width: 88px;
          height: 32px;
          @include flex();
          cursor: pointer;
        }
        .cancel {
          border: 1px solid #1d7dfa;
          color: #1d7dfa;
        }
        .yes {
          margin-left: 20px;
          border: 1px solid #1d7dfa;
          background-color: #1d7dfa;
          color: #fff;
        }
      }
    }
  }
}
// #div1 {
//   margin-top: 300px;
// }
.w-e-toolbar {
  z-index: 2 !important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
</style>
